<template>
  <el-row class="warp">
      <el-col class="publicNav" :span='3' style="height:100%">
          <router-link  class="newnava" :to="{'path':''}">日志管理</router-link>
      </el-col>
      <el-col :span='21' class="log-warp" >
          <div class="main-contents-box">
            <div class="main-contents-main">
               <div class="log-warp-inner">
          <div class="log-inner-header" align="center">
               <el-select class="logselect" size='mini' v-model="logValue" filterable placeholder="请选择"  @change="selectchange">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-date-picker
                    v-model="timeValue"
                    type="datetimerange"
                    :picker-options="pickerOptions2"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="left" size="mini" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
                <el-button v-if="logshow"  type="primary" size="mini" @click="search_alarm_log" icon="el-icon-zoom-in">查询</el-button>
                <el-button v-else  type="primary" size="mini" @click="search_ope_log" icon="el-icon-zoom-in">查询</el-button>
          </div>
          <div class="log-content">
              <div class="alamlog" v-if="logshow">
                  <div class="logmain">
                      <el-table
                      v-loading="loading"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                        :data="alamLog"
                        border
                        stripe
                        size="mini"
                        max-height="360"
                        style="width: 100%;text-align:center;overflow:hidden">
                        <el-table-column
                          prop="name"
                          label="告警设备"
                           show-overflow-tooltip header-align="center">
                        </el-table-column>
                        <el-table-column
                          prop="msg"
                          label="告警内容"
                           show-overflow-tooltip header-align="center">
                        </el-table-column>
                        <el-table-column
                          prop="stime"
                          label="开始时间" show-overflow-tooltip header-align="center">
                        </el-table-column>
                        <el-table-column
                          prop="etime"
                          label="结束时间" show-overflow-tooltip header-align="center">
                        </el-table-column>
                      </el-table>
                      <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="alamNumber"
                        :page-size="8"
                        @current-change="search_alarm_page"
                        :current-page.sync="currentPage1"
                        align="center"
                        >
                      </el-pagination>
                  </div>
              </div>
              <div class="operationlog" v-else >
                  <div class="logmain">
                    <el-table
                        :data="plog"
                        border
                        stripe
                        size="mini"
                        max-height="360"
                        style="width:100%;text-align:center">
                        <el-table-column
                          prop="time"
                          label="日期"
                           show-overflow-tooltip header-align="center">
                        </el-table-column>
                        <el-table-column
                          prop="operate"
                          label="记录"  show-overflow-tooltip header-align="center">
                        </el-table-column>
                      </el-table>
                      <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="number"
                        :page-size="8"
                        @current-change="search_ope_page"
                        :current-page.sync="currentPage2"
                        align="center"
                        >
                      </el-pagination>
                  </div>
              </div>
            </div>
          </div>
            </div>
          </div>
      </el-col>
  </el-row>
</template>
<script>
import {get_attr1} from "../js/public.js"
export default {
  name: 'log',
  data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
           {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        timeValue: "",
        options: [
          {
            value: 0,
            label: '告警日志'
          },
          {
            value: 1,
            label: '联动日志'
          },
          {
            value: 2,
            label: '操作日志'
          },
          {
            value: 3,
            label: '控制日志'
          }

        ],
        logValue:0,
        logshow:true,
        alamLog:[],
        plog:[],
        alamNumber:0,
        number:0,
        loading:false,
        currentPage1:1,
        currentPage2:1 
      }
    },
      methods: {
       tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      get_pwd(){
        let  pwd; 
        $.ajax({
            url:'../cfg/password.json',
            type:'GET',
            cache:false,
            async: false,
            dataType:'text',
            success:function(result){
                let data = eval("("+result+")");
                pwd = data.password;
            },
            error:function(realdata){                           
            }
        })
        return pwd;
    },
    check_pwd(){
        let username = window.sessionStorage.getItem('username');
        let password = window.sessionStorage.getItem('password');
        let pwd = this.get_pwd();
        if(username == "admin"){
            if(password != pwd){
                this.$message({
                    message: '密码做了更改,请重新登录!',
                    type: 'info',
                    center:true,
                    showClose: true
                });
                this.loginout();
            }
        } 
    },
    loginout(){
        this.set_log("用户退出");
        window.sessionStorage.removeItem("username");
        window.sessionStorage.removeItem("password");
        this.$router.push("/login");
    },
    set_log(str){//用户操作日志
        let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
        $.ajax({
            url:"cgi-bin/main.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){           
            }
        })
    },
      search_alarm_log(){
          //告警日志搜索
          let that=this;
         
          this.$data.currentPage1 = 1;

          let stime = that.$data.timeValue[0];
          let etime = that.$data.timeValue[1];
          let msg = {"cmd":"CGI_LOG_GET_ALARM_LIST","page":1,"line":8,"stime":stime,"etime":etime};

          if(window.sessionStorage.getItem('username')=="zyl"){
              this.$ajax.get("../../static/alarm_log.json",msg).then(function(res){
                  let merge_arr = new Array();
                  $.each(res.data.list,function(n,val){
                      let info_arr = new Array();
                      info_arr["name"] = val.dname;
                      info_arr["stime"] = val.stime;
                      info_arr["etime"] = val.etime;

                      let attr = get_attr1(val.mid);
                      let detail = that.get_detail(val.alarm);

                      info_arr["msg"] = attr+detail;
                      merge_arr.push(info_arr);
                  })
                  that.$data.alamLog=merge_arr;
                  that.$data.alamNumber=res.data.totalline;
                
             })
          }else{
              $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                      let data =eval( "("+msg+")" );
                      let merge_arr = new Array();
                      $.each(data.list,function(n,val){
                          let info_arr = new Array();
                          info_arr["name"] = val.dname;
                          info_arr["stime"] = val.stime;
                          info_arr["etime"] = val.etime;

                          let attr = get_attr1(val.mid);
                          let detail = that.get_detail(val.alarm);

                          info_arr["msg"] = attr+detail;

                          merge_arr.push(info_arr);
                      })
                      //获取数据后对列表进行赋值
                      that.$data.alamLog=merge_arr;
                      that.$data.alamNumber=data.totalline;
                                  
                  }
              })  
          } 
      },
      search_ope_log(){
        //操作日志搜索
        
        let that=this;
        this.$data.currentPage2 = 1;

         let stime = that.$data.timeValue[0];
         let etime = that.$data.timeValue[1];
         let type = that.$data.logValue;
         let msg = {"cmd":"CGI_LOG_GET_LIST","type":type,"page":1,"line":8,"stime":stime,"etime":etime};

        if(window.sessionStorage.getItem('username')=="zyl"){
            this.$ajax.get("../../static/ope_log.json",msg).then( function(res){
                  //console.log(res.data);
                  let merge_arr = new Array();
                  $.each(res.data.list,function(n,val){
                      let info_arr = new Array();
                      info_arr["time"] = val.time;
                      info_arr["operate"] = val.data;

                      merge_arr.push(info_arr);
                  })
                  that.$data.plog=merge_arr;
                  that.$data.number=res.data.totalline;
                 
            })
        }else{
            $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                      let data =eval( "("+msg+")" );
                      let merge_arr = new Array();
                      $.each(data.list,function(n,val){
                          let info_arr = new Array();
                          info_arr["time"] = val.time;
                          info_arr["operate"] = val.data;
                          merge_arr.push(info_arr);
                      })
                      that.$data.plog=merge_arr;
                      that.$data.number=data.totalline;
                                 
                  }
              })
          } 
      },
      selectchange(){
        //console.log(this.$data.logValue);
          if(this.$data.logValue==0){
            //获取当天告警日志
            this.$data.logshow=true;
            this.get_alarm_log();

           }else{
             this.$data.logshow=false;
             //获取当天操作日志
             this.get_ope_log();
           }
      },
      search_alarm_page(val) {//点击操作页数发送请求，获取uiying页数的数据
        let page=val;
        let that=this;
        let stime = that.$data.timeValue[0];
        let etime = that.$data.timeValue[1];
        let type = that.$data.logValue;
        let msg = {"cmd":"CGI_LOG_GET_ALARM_LIST","page":page,"line":8,"stime":stime,"etime":etime};

        if(window.sessionStorage.getItem('username')=="zyl"){
            this.$ajax.get("../../static/alarm_log.json",msg).then( function(res){
                  let merge_arr = new Array();
                  $.each(res.data.list,function(n,val){
                      let info_arr = new Array();
                      info_arr["name"] = val.dname;
                      info_arr["stime"] = val.stime;
                      info_arr["etime"] = val.etime;

                      let attr = get_attr1(val.mid);
                      let detail = that.get_detail(val.alarm);

                      info_arr["msg"] = attr+detail;

                      merge_arr.push(info_arr);
                  })
                  that.$data.alamLog=merge_arr;
                  that.$data.alamNumber=res.data.totalline;
                  
            })
        }else{
            $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                      let data =eval( "("+msg+")" );

                      let merge_arr = new Array();
                      $.each(data.list,function(n,val){
                          let info_arr = new Array();
                          info_arr["name"] = val.dname;
                          info_arr["stime"] = val.stime;
                          info_arr["etime"] = val.etime;

                          let attr = get_attr1(val.mid);
                          let detail = that.get_detail(val.alarm);

                          info_arr["msg"] = attr+detail;
                          merge_arr.push(info_arr);
                      })
                      //获取数据后对列表进行赋值
                      that.$data.alamLog=merge_arr;
                      that.$data.alamNumber=data.totalline;
                                
                  }
              })
         }
      },
      search_ope_page(val) {//点击告警页数发送请求，获取uiying页数的数据
        let page=val;
        let that=this;
        let stime = that.$data.timeValue[0];
        let etime = that.$data.timeValue[1];
        let type = that.$data.logValue;

        let msg = {"cmd":"CGI_LOG_GET_LIST","type":type,"page":page,"line":8,"stime":stime,"etime":etime};

        if(window.sessionStorage.getItem('username')=="zyl"){
            this.$ajax.get("../../static/ope_log.json",msg).then( function(res){
                  let merge_arr = new Array();
                  $.each(res.data.list,function(n,val){
                      let info_arr = new Array();
                      info_arr["time"] = val.time;
                      info_arr["operate"] = val.data;
                      merge_arr.push(info_arr);
                  })
                  that.$data.plog=merge_arr;
                  that.$data.number=res.data.totalline;
                  
              })
        }else{
            $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                      let data =eval( "("+msg+")" );
                      let merge_arr = new Array();
                      $.each(data.list,function(n,val){
                          let info_arr = new Array();
                          info_arr["time"] = val.time;
                          info_arr["operate"] = val.data;
                          merge_arr.push(info_arr);
                      })
                      that.$data.plog=merge_arr;
                      that.$data.number=data.totalline;
                                
                  }
              })
        }
      },
      get_alarm_log(){
          //默认显示当天的告警日志
          let startTime = this.get_stime();
          let endTime = this.get_etime();
          let msg = {"cmd":"CGI_LOG_GET_ALARM_LIST","page":1,"line":8,"stime":startTime,"etime":endTime};

          let that=this;
          this.$data.timeValue=[startTime,endTime];

          if(window.sessionStorage.getItem('username')=="zyl"){
              this.$ajax.get("../../static/alarm_log.json",msg).then( function(res){
                  let merge_arr = new Array();
                  $.each(res.data.list,function(n,val){
                      let info_arr = new Array();
                      info_arr["name"] = val.dname;
                      info_arr["stime"] = val.stime;
                      info_arr["etime"] = val.etime;

                      let attr = get_attr1(val.mid);
                      let detail = that.get_detail(val.alarm);

                      info_arr["msg"] = attr+detail;
                      merge_arr.push(info_arr);
                  })

                  that.$data.alamLog=merge_arr;
                  that.$data.alamNumber=res.data.totalline;
                
              })
          }else{
              $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                     
                      let data =eval( "("+msg+")" );

                      let merge_arr = new Array();
                      $.each(data.list,function(n,val){
                          let info_arr = new Array();
                          info_arr["name"] = val.dname;
                          info_arr["stime"] = val.stime;
                          info_arr["etime"] = val.etime;

                          let attr = get_attr1(val.mid);
                          let detail = that.get_detail(val.alarm);

                          info_arr["msg"] = attr+detail;
                          merge_arr.push(info_arr);
                      })
                      //获取数据后对列表进行赋值
                      that.$data.alamLog=merge_arr;
                      that.$data.alamNumber=data.totalline;
                                  
                  },
                  error: function (XMLHttpRequest, textStatus, errorThrown) {
                     
                  }
              })
          }
      },
      get_ope_log(){
          //默认显示当天的告警日志
          let startTime = this.get_stime();
          let endTime = this.get_etime();
          let type = this.$data.logValue;
          let msg = {"cmd":"CGI_LOG_GET_LIST","type":type,"page":1,"line":8,"stime":startTime,"etime":endTime};
          let that=this;
          
          this.$data.timeValue=[startTime,endTime];

          if(window.sessionStorage.getItem('username')=="zyl"){
              this.$ajax.get("../../static/ope_log.json",msg).then( function(res){
                  let merge_arr = new Array();
                  $.each(res.data.list,function(n,val){
                      let info_arr = new Array();
                      info_arr["time"] = val.time;
                      info_arr["operate"] = val.data;
                      merge_arr.push(info_arr);
                  })
                  that.$data.plog=merge_arr;
                  that.$data.number=res.data.totalline;
                  
              })
          }else{

            $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                      let data =eval( "("+msg+")" );
                      let merge_arr = new Array();
                      $.each(data.list,function(n,val){
                          let info_arr = new Array();
                          info_arr["time"] = val.time;
                          info_arr["operate"] = val.data;
                          merge_arr.push(info_arr);
                      })
                      that.$data.plog=merge_arr;
                      that.$data.number=data.totalline;
                              
                  }
              })
          }
      },
      CurentTime(){ 
          let now = new Date();
          let year = now.getFullYear();       //年
          let month = now.getMonth() + 1;     //月
          let day = now.getDate();            //日
          let hh = now.getHours();            //时
          let mm = now.getMinutes();          //分
          let ss = now.getSeconds();
          let clock = year + "-";
         
          if(month < 10)clock += "0";
          clock += month + "-";
         
          if(day < 10)clock += "0";  
          clock += day + " ";
         
          if(hh < 10)clock += "0";
          clock += hh + ":";

          if (mm < 10) clock += '0'; 
          clock += mm + ":";

          if(ss<10) clock += '0';
          clock +=ss; 
          //console.log(clock);
          return(clock); 
       },
       CurrentDay(){ 
          let now = new Date();
          let year = now.getFullYear();       //年
          let month = now.getMonth() + 1;     //月
          let day = now.getDate();            //日
          let clock = year + "-";
         
          if(month < 10)clock += "0";
          clock += month + "-";
         
          if(day < 10)clock += "0";  
          clock += day + " "+"00:00:00";
          //console.log(clock);
          return(clock); 
       },
       get_detail(key){
          let arr = new Array();
          arr = {
             "1":"告警",
             "2":"过高",
             "3":"过低"
          }
          return arr[key];
       },
       get_stime(){
            let etime = this.get_etime();
            let time_arr = etime.split(" ");
            let day_time = time_arr[0].replace(/\//g,"-");
            let stime = day_time + " 00:00:00";
            return stime;
       },
       get_etime(){
            let storage = window.sessionStorage;
            let end_time = storage.getItem("time");
            let etime = end_time.replace(/\//g,"-");
            return etime;
       },
       get_time(){
          let stime = this.get_stime();
          let etime = this.get_etime();
          this.$data.timeValue=[stime,etime];
       }
    },
    mounted(){
        this.check_pwd(); 
    },
    created(){
        this.get_time();
        this.get_alarm_log();
    }
}
</script>
<style scoped>
.block{
 margin: auto;
}
.search{
  padding: 7px;
  cursor: pointer;
  width: 100px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 14px;
  letter-spacing: 2px;
  position: relative;
}
.search:hover{
  background: #0080c0;
  color: #fff;
}
.logselect{
    width: 110px;
    top: 1px;
}
.log-content{
  width: 720px;
  height: auto;
  min-height: 200px;
}
.log-content ul{
  width: 100%;
  height: auto;
  overflow: hidden;
  height: 30px;
}
.alamlog ul li{
    width: 25%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0px;
    float: left;
    padding: 0px;
}
.operationlog ul li{
    width: 33.3%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0px;
    float: left;
    padding: 0px;
}
.logmain{
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 15px;
}
.el-pagination{
  margin-top: 15px;
}
.log-warp{
  height:100%;overflow:hidden;position:relative
}
.log-warp-inner{
  width:710px;height:auto;margin:auto;
  overflow: hidden;
}
.log-inner-header{
  margin-top: 10%;
  margin-bottom: 5%;
}
.el-date-range-picker.has-sidebar{
  width: 610px;
}
</style>
